<template>
  <div>
    <v-layout row wrap v-if="show">
      <v-flex xs12>
        <v-text-field ref='inputField' hide-details v-model="inputValue" solo label="在此输入你要查询的垃圾名称" clearable @focus="inputFocus" @blur="inputBlur">
          <template v-slot:append>
            <v-fade-transition leave-absolute>
              <v-progress-circular v-if="searching" size="24" color="info" indeterminate></v-progress-circular>
              <v-icon size="24" v-else color="info" @click.stop="searchJunk">search</v-icon>
            </v-fade-transition>
          </template>
          <template v-slot:prepend-inner>
            <v-icon size="24" color="grey lighten-1" @click="camera">camera_alt</v-icon>
          </template>
        </v-text-field>
      </v-flex>
    </v-layout>
  </div>
</template>
<script>
export default {
  name: 'SearchBar',
  props:['searching','clearnSearch'],
  data () {
    return {
      inputValue: '',
      show:true
    }
  },
  methods:{
    searchJunk(){
      if(!this.inputValue){
        this.$store.dispatch('showAlert', { text: '请输入要查询的物品名称' });
        return;
      }
      this.$emit('searchText',this.inputValue);
      this.$refs.inputField.blur();
    },
    inputFocus(){
      this.$emit('focus');
    },
    inputBlur(){
      this.$emit('blur');
    },
    camera(){
      this.$store.dispatch('showAlert', { text: '图像识别功能暂未开放',type:'info' });
    }
  },
  watch: {
    inputValue: function (val) {
      if (!val) {
        this.$emit('clearnText');
      } else {
        this.$emit('textInput', val);
      }
    },
    clearnSearch: function(){
      this.inputValue = '';
    }
  }
}
</script>
<style lang="less" scoped>
</style>
